<template>
	<div class="col-md-6 col-md-offset-3 login-bg">
		<div class="well bs-component">
		  <form method="POST" action="#" class="form-horizontal">
		    <fieldset>
		      <legend class="text-center">登录</legend>
		      <div class="form-group">
		        <div class="col-md-10 col-md-offset-1">
		          <label for="account" class="control-label">邮箱地址</label>
		          <input id="account" type="input" name="account" v-model="form.account" ref="account" placeholder="请输入邮箱" required="required" autofocus="autofocus" class="form-control" autocomplete="off">
		      	</div>
		      </div>
		      <div class="form-group">
		        <div class="col-md-10 col-md-offset-1">
		          <label for="password" class="control-label">密码</label>
		          <input id="password" type="password" name="password" v-model="form.password" ref="password" placeholder="请输入密码" required="required" class="form-control" autocomplete="off">
		      	</div>
		      </div>
		      <div class="form-group">
		        <div class="col-md-8 col-md-offset-1">
		          <div class="checkbox">
		            <label>
		              <input type="checkbox" name="remember" v-model="remember">记住我</label></div>
		        </div>
		      </div>
		      <div class="form-group">
		        <div class="col-lg-10 col-lg-offset-1">
		          <button type="button" class="btn btn-success form-control" @click="login">登录</button></div>
		      </div>
		      <div class="col-xs-12 col-sm-10 col-sm-offset-1 login-mid">
		        <div class="strike">
		          <span>or</span></div>
		      </div>
		      <div class="form-group">
		        <div class="col-lg-10 col-lg-offset-1">
		          <a href="javascript:;" class="btn btn-primary form-control" @click="autoLogin">
		            <i class="ion-social-github"></i>登录 Github
		          </a>
		        </div>
		      </div>
		      <div class="form-group">
		        <div class="col-md-8 col-md-offset-2 text-center">
		        	<router-link to="/reset" class="btn btn-link">
		        		忘记密码？
		        	</router-link>
		      	</div>
		      </div>
		    </fieldset>
		  </form>
		</div>
	</div>
</template>

<script>
	import {mapActions,mapMutations} from 'vuex'
	import {saveRefreshToken} from 'database'
    import {setTitle} from 'common/dom'

	export default {
		data() {
			return {
				form:{
					account: '',
					password: '',
				},
				remember: true
			}
		},
		created() {
            setTitle(this.$title.login)
		},
		methods: {
			filterUser() {
				if(this.form.account == '') {
					this.$message('请输入账号')
					return false
				}
				if(this.form.password == '') {
					this.$message('请输入密码')
					return false
				}
				return true
			},
			showErrors(errors) {
				this.setDataReady(true)
				if(errors.status === 401) {
					this.form.password = ''
					this.$refs.password.focus();
					this.$message('账号不存在或被禁止登陆，当然通常为密码错误~')
				}else{
					this.$message('服务器罢工啦~帮忙联系站长..谢啦')
				}
			},
			autoLogin() {
				this.$message('功能还没上哦~')
			},
			login() {
				if(!this.filterUser()) {
					return false
				}
				this.setDataReady(false)
				this.$http.post('/auth/token',this.form).then((response) => {
					this.setLogin(true)
					let token = response.data.token
					let user = response.data.user
					this.$http.defaults.headers.common.Authorization = 'Bearer ' + token.access_token
					if(this.remember) {
						saveRefreshToken(token.refresh_token)
					}
					this.saveUser(user)
					this.saveToken(token)
					let _this = this;
					setTimeout(function() {
						_this.$router.push({
		                    path: '/'
		                })
					},350);
				}).catch((error) =>{
				    if (error.response) {
						this.setDataReady(true)
						this.showErrors(error.response)
				    }else{
						this.$message('服务器罢工啦~帮忙联系站长..谢啦')
				    }
				})
			},
			...mapActions([
		      'saveUser',
		      'saveToken'
		    ]),
            ...mapMutations({
              setDataReady: 'SET_DATA_READY',
              setLogin: 'SET_LOGIN'
            })
		}
	}
</script>

<style lang="scss" scope>
	.login-bg {
		.well {
			margin-top: 35px;
			background: #fff;
			legend {
				border: none;
			    margin-bottom: 24px;
			    color: #636b6f;
			}
			label {
				line-height: 25px;
			}
			.btn-success {
				color: #fff;
			    background-color: #6289ad;
			    border-color: #6289ad;
			}
			.btn-primary {
				color: #fff;
			    background-color: #34495e;
			    border-color: #32465b;
			}
			.strike {
			    display: block;
			    overflow: hidden;
			    white-space: nowrap;
			    margin-bottom: 15px;
			}
			.login-mid {
				text-align: center;
			}
		}
	}
</style>